/*
 * @Author: your name
 * @Date: 2022-03-30 09:41:22
 * @LastEditTime: 2022-04-11 15:30:14
 * @LastEditors: chenyuanming
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \erp_background_system\src\views\contract\list.jsx
 */
import React, { useState, useRef,useEffect } from 'react';
import CreateExcel from 'js-export-excel';
import './list.css'
import * as listApi from './listApi'
import Contractmodify from '../../components/contractModify/ContractModify';
import Mypagination from '../../components/myPagination/MyPagination';
import {
    CaretDownOutlined, CaretUpOutlined, PlusSquareOutlined,
    PlusCircleOutlined,
    EditOutlined,
    DeleteOutlined,
    QuestionCircleOutlined
} from '@ant-design/icons';
import { Button, Input, Space, Form, Row, Col, DatePicker, Select, Radio, Collapse, Table, Modal } from 'antd';
const { RangePicker } = DatePicker;
const { Option } = Select;
const { TextArea } = Input;
const List = () => {
    const getContractData=()=>{
        // const data = [
        //     {
        //         key: '1',
        //         recordDate: '2022-2-6',
        //         customerName: 'John Brown',
        //         constractNum: 123245678932,
        //         orderNum: 1234565432,
        //         dateStart: '2022-01-21',
        //         dateEnd: '2022-01-27',
        //         constractCategory: '委托',
        //         total: '100',
        //         collected: '100',
        //         arears: '0',
        //         isBill: 1,
        //         constractStatus: {
        //             status: 1,
        //             isreNew: 0
        //         },
        //         isTax: 2,
        //         reviewer: '超级管理员',
        //         checkTime: '2022-5-6',
        //         remark: '',
        //         salesman: '超级管理员',
        //         appendix: ''
        //     },
        listApi.getContract().then(res=>{
            console.log(res.data.data);
        })
    }
    useEffect(() => {
        getContractData()
    }, []);
    const btnList = [
        {
            id: 0,
            title: '合同列表'
        },
        {
            id: 1,
            title: '今日新增'
        },
        {
            id: 2,
            title: '本周新增'
        },
        {
            id: 3,
            title: '本月新增'
        },
        {
            id: 4,
            title: '今日到期'
        },
        {
            id: 5,
            title: '本周到期'
        },
        {
            id: 6,
            title: '本月到期'
        }
    ]
    const [isAddContractModalVisible, setisAddContractModalVisible] = useState(false)
    const showAddContractModal = (flag) => {
        console.log(flag);
        setisAddContractModalVisible(flag);
    };
    const [customerData, setcustomerData] = useState([]);
    const [dateStart, setdateStart] = useState([]);
    const [dateEnd, setdateEnd] = useState([]);
    const [btnindex, setbtnindex] = useState(0);
    // const onSearch = value => console.log(value);
    const [arrowstatus, setarrowstatus] = useState('none');
    const formRef = useRef()
    const highLevelSearch = () => {
        // console.log(formRef,formRef.current.style.display);
        if (formRef.current.style.display === 'block') {
            formRef.current.style.display = 'none'
            setarrowstatus('none')
        } else {
            formRef.current.style.display = 'block'
            setarrowstatus('block')
        }
    }
    const [form] = Form.useForm();
    const formValue = () => {
        let a = form.getFieldsValue(true)
        console.log(a);
        console.log(dateEnd, dateStart);
    }
    const onReset = () => {
        form.resetFields();
    };
    const openModifyModal = (record) => {
        showAddContractModal(true)
        setcustomerData(record)
    }
    const columns = [
        {
            align: 'center',
            title: '客户名称',
            width: 120,
            dataIndex: 'customerName',
            key: 'customerName',
            fixed: 'left',
        },
        {
            align: 'center',
            title: '合同编号',
            width: 150,
            dataIndex: 'constractNum',
            key: 'constractNum',
            fixed: 'left',
        },
        { align: 'center', title: '订单编号', width: 110, dataIndex: 'orderNum', key: '1' },
        { align: 'center', title: '起始日期', width: 120, dataIndex: 'dateStart', key: '2' },
        {
            align: 'center',
            title: '到期日期', width: 120, dataIndex: 'dateEnd', key: '3', render: dateEnd => {
                return <span style={{ color: 'red' }}>{dateEnd}</span>
            }
        },
        {
            align: 'center',
            title: '合同分类', width: 100, dataIndex: 'constractCategory', key: '4'
        },
        { align: 'center', title: '总金额', width: 100, dataIndex: 'total', key: '5' },
        { align: 'center', title: '已收款', width: 100, dataIndex: 'collected', key: '6' },
        { align: 'center', title: '欠款', width: 100, dataIndex: 'arears', key: '7' },
        {
            align: 'center',
            title: '提供发票', width: 90, dataIndex: 'isBill', key: '8', render: (isBill) => {
                if (isBill === 1) {

                    return <Button size='small' style={{ border: 'none', borderRadius: '5px', background: '#e0405a', color: '#fff' }} type="primary">是</Button>
                } else {
                    return <span>否</span>
                }
            }
        },
        {
            align: 'center',
            title: '是否含税', width: 90, dataIndex: 'isTax', key: '9', render: (isTax) => {
                if (isTax === 1) {

                    return <Button size='small' style={{ border: 'none', borderRadius: '5px', background: '#e0405a', color: '#fff' }} type="primary">是</Button>
                } else {
                    return <span>否</span>
                }
            }
        },
        { align: 'center', title: '审核人员', width: 110, dataIndex: 'reviewer', key: '10' },
        { align: 'center', title: '审核时间', width: 100, dataIndex: 'checkTime', key: '11' },
        { align: 'center', title: '备注', width: 100, dataIndex: 'remark', key: '12' },
        { align: 'center', title: '业务员', width: 110, dataIndex: 'salesman', key: '13' },
        { align: 'center', title: '录入时间', width: 100, dataIndex: 'recordDate', key: '14' },
        { align: 'center', title: '附件', width: 100, dataIndex: 'appendix', key: '15' },
        {
            align: 'center',
            title: '合同状态', width: 150, dataIndex: 'constractStatus', key: '16', render: (constractStatus, recode) => {
                return (
                    <div>
                        <Button onClick={() => openAuditModal(recode)} size='small' style={{ border: 'none', borderRadius: '5px', background: '#e0405a', color: '#fff' }} type="primary">{constractStatus.status === 0 ? '合同有效' : constractStatus.status === 1 ? "合同无效" : '待审'}</Button>
                        <Button onClick={() => open_renew_modal(recode)} className={constractStatus.isreNew === 0 ? 'contractStatusSty' : constractStatus.isreNew === 1 ? 'contractStatusSty2' : ''} size='small' style={{ marginLeft: '5px', border: 'none', borderRadius: '5px', color: '#fff' }} type="primary">{constractStatus.isreNew === 0 ? '续费记录' : constractStatus.isreNew === 1 ? '续费待审' : ''}</Button>
                    </div>
                )
            }
        },
        {
            title: '管理',
            key: 'operation',
            fixed: 'right',
            width: 380,
            render: (text, record) => {
                return <div style={{ display: 'flex' }}>
                    <Button size='small' onClick={() => { openAddRenew(record) }} style={{ background: '#009966', border: 'none', color: '#fff', marginLeft: '10px' }} type="primary"><PlusSquareOutlined />续费</Button>
                    <Button size='small' onClick={() => { openreceive(record) }} style={{ background: '#009966', border: 'none', color: '#fff', marginLeft: '10px' }} type="primary"><PlusCircleOutlined />到款</Button>
                    <Button size='small' onClick={() => {
                        openModifyModal(record)
                    }} style={{ background: '#3782c3', border: 'none', color: '#fff', marginLeft: '10px' }} type="primary"><EditOutlined />修改</Button>
                    <Button size='small' onClick={() => {
                        opendeleteContract()
                    }} style={{ background: '#ff0000', border: 'none', color: '#fff', marginLeft: '10px' }} type="primary"><DeleteOutlined />删除</Button>
                </div>

            },
        },
    ];
    const data = [
        {
            key: '1',
            recordDate: '2022-2-6',
            customerName: 'John Brown',
            constractNum: 123245678932,
            orderNum: 1234565432,
            dateStart: '2022-01-21',
            dateEnd: '2022-01-27',
            constractCategory: '委托',
            total: '100',
            collected: '100',
            arears: '0',
            isBill: 1,
            constractStatus: {
                status: 1,
                isreNew: 0
            },
            isTax: 2,
            reviewer: '超级管理员',
            checkTime: '2022-5-6',
            remark: '',
            salesman: '超级管理员',
            appendix: ''
        },
        {
            key: '2',
            recordDate: '2022-2-6',
            customerName: 'John Brown',
            constractNum: 123245678932,
            orderNum: 1234565432,
            dateStart: '2022-01-21',
            dateEnd: '2022-01-27',
            constractStatus: {
                status: 0,
                isreNew: 1
            },
            constractCategory: '委托',
            total: '100',
            collected: '100',
            arears: 0,
            isBill: 0,
            isTax: 0,
            reviewer: '超级管理员',
            checkTime: '2022-5-6',
            remark: '',
            salesman: '超级管理员',
            appendix: ''

        },
    ];
    // 导出为excel
    const download = () => {
        let rowdata = data;
        let option = {};
        let dataTable = [];
        option.fileName = '合同管理';  //excel文件名称

        rowdata.map(v => {
            dataTable.push({
                '客户名称': v.customerName,
                '合同编号': v.constractNum,
                '订单编号': v.orderNum,
                '起始日期': v.dateStart,
                '到期日期': v.dateEnd,
                '合同分类': v.constractCategory,
                '总金额': v.total,
                '已收款': v.collected,
                '欠款': v.arears===0?'是':'否',
                '提供发票': v.isBill === 0 ? '是' : "否",
                // '合同状态': v.constractStatus,
                '审核时间': v.checkTime,
                '业务员': v.salesman,
                '录入时间': v.recordDate,

            })
        });
        option.datas = [
            {
                sheetData: dataTable,
                sheetName: 'sheet',
                sheetFilter: ['客户名称','合同编号','订单编号','起始日期','到期日期','到期日期','合同分类','总金额','已收款','欠款', '提供发票','合同状态','审核时间','业务员','录入时间'],
                sheetHeader: ['客户名称','合同编号','订单编号','起始日期','到期日期','到期日期','合同分类','总金额','已收款','欠款', '提供发票','合同状态','审核时间','业务员','录入时间'],
            }
        ];
        let toExcel = new CreateExcel(option);
        toExcel.saveExcel()
    }
    //modal框
    //审核的modal框
    const [audit, setaudit] = useState(false);
    // 审核modal框中的单选项值
    const [tableData, settableData] = useState(data);
    const [currentTableData, setcurrentTableData] = useState(0);
    // const [contractStatusState, setcontractStatusState] = useState(data);
    //单选项改变触发的方法：
    const radioChange = (e) => {
        console.log(e.target.value);
        currentTableData.constractStatus.status = e.target.value
        console.log(currentTableData);
        tableData.forEach(item => {
            if (item.key === tableData.key) {
                item.constractStatus.status = tableData.constractStatus.status
            }
        })
        settableData(tableData)
    }
    // 判断是修改合同续费还是新增合同续费
    const [isAddRenew, setisAddRenew] = useState(true);
    // 更改状态
    const alterisAddRenew = (flag) => {
        setisAddRenew(flag)
    }
    const alterRenew = () => {
        openAddRenew()
        alterisAddRenew(false)
    }
    //点击续费记录
    // 续费记录
    const renew_data_source = [
        {
            key: 1,
            renewRecord: '第一次续费',
            expireDate: '2022-2-5',
            total: 30,
            received: 33,
            remark: 12,
            renewStatus: 1,
            salesman: '超级管理员',
            record: '2022-5-5'
        }
    ]
    const renew_data_columns = [
        {
            align: 'center',
            title: '续费记录',
            width: 120,
            dataIndex: 'renewRecord',
            key: 'renewRecord',
        }, {
            align: 'center',
            title: '到期日期',
            width: 120,
            dataIndex: 'expireDate',
            key: 'expireDate',
        },
        {
            align: 'center',
            title: '总金额',
            width: 120,
            dataIndex: 'total',
            key: 'total',
        }, {
            align: 'center',
            title: '已收款',
            width: 120,
            dataIndex: 'received',
            key: 'received',
        }, {
            align: 'center',
            title: '备注',
            width: 120,
            dataIndex: 'remark',
            key: 'remark',
        }, {
            align: 'center',
            title: '续费状态',
            width: 120,
            dataIndex: 'renewStatus',
            key: 'renewStatus',
            render: (constractStatus, recode) => {
                return (
                    <div>
                        {/* <Button onClick={() => openAuditModal(recode)} size='small' style={{ border: 'none', borderRadius: '5px', background: '#e0405a', color: '#fff' }} type="primary">{constractStatus.status === 0 ? '合同有效' : constractStatus.status === 1 ? "合同无效" : '待审'}</Button>
                        <Button onClick={() => open_renew_modal(recode)} size='small' style={{ marginLeft: '5px', border: 'none', borderRadius: '5px', background: '#3f8fb8', color: '#fff' }} type="primary">{constractStatus.isreNew === true ? '续费记录' : ''}</Button> */}
                        <Button size='small' style={{ marginLeft: '5px', border: 'none', borderRadius: '5px', background: '#3f8fb8', color: '#fff' }} type="primary">待审</Button>


                    </div>
                )
            }
        }, {
            align: 'center',
            title: '业务员',
            width: 120,
            dataIndex: 'salesMan',
            key: 'salesMan',
        }, {
            align: 'center',
            title: '录入时间',
            width: 120,
            dataIndex: 'record',
            key: 'record',
        }, {
            align: 'center',
            title: '管理',
            width: 120,
            render: (constractStatus, recode) => {
                return (
                    <div>
                        {/* <Button onClick={() => openAuditModal(recode)} size='small' style={{ border: 'none', borderRadius: '5px', background: '#e0405a', color: '#fff' }} type="primary">{constractStatus.status === 0 ? '合同有效' : constractStatus.status === 1 ? "合同无效" : '待审'}</Button>
                        <Button onClick={() => open_renew_modal(recode)} size='small' style={{ marginLeft: '5px', border: 'none', borderRadius: '5px', background: '#3f8fb8', color: '#fff' }} type="primary">{constractStatus.isreNew === true ? '续费记录' : ''}</Button> */}
                        {/* <Button size='small' style={{ marginLeft: '5px', border: 'none', borderRadius: '5px', background: '#3f8fb8', color: '#fff' }} type="primary">待审</Button> */}
                        <EditOutlined onClick={alterRenew} className='renewIcon' />
                        <DeleteOutlined className='renewIcon' />

                    </div>
                )
            }
        },
    ]
    const [is_renew_modal_visible, setis_renew_modal_visible] = useState(false);
    const handle_renew_Ok = () => {
        setis_renew_modal_visible(false)
    }
    const handle_renew_Ok_cancel = () => {
        setis_renew_modal_visible(false)
    }
    const open_renew_modal = () => {
        setis_renew_modal_visible(true)
    }
    const openAuditModal = (recode) => {
        setaudit(true)
        //当前行数据
        setcurrentTableData(recode);
    }
    const handleAuditOk = () => {
        setaudit(false)

    }
    const handleAuditCancel = () => {
        setaudit(false)
    }
    //新增续费的事件
    const [AddRenew, setAddRenew] = useState(false);
    const handleAddRenewOk = () => {
        setAddRenew(false)
    }
    const handleAddRenewCancel = () => {
        setAddRenew(false)
    }
    const openAddRenew = (record) => {
        setisAddRenew(true)
        setAddRenew(true)
    }
    //到款按钮点击效果
    const [receive, setreceive] = useState(false);

    const handlereceiveOk = () => {
        setreceive(false)
    }
    const handlereceiveCancel = () => {
        setreceive(false)
    }
    const openreceive = () => {
        setreceive(true)
    }
    //删除合同点击
    const [deleteContract, setdeleteContract] = useState(false);
    const handledeleteContractOk = () => {
        setdeleteContract(false)
    }
    const handledeleteContractCancel = () => {
        setdeleteContract(false)
    }
    const opendeleteContract = () => {
        setdeleteContract(true)
    }
    return (
        <div className='theadSty' style={{ backgorundColor: '#eff0ef' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                <div>
                    {
                        btnList.map((item, index) => {
                            return <Button className={item.id === btnindex ? 'activeNav' : 'simpleBtn'} key={item.id} size='small' style={{ marginLeft: '1px', border: 'none' }} type="primary" onClick={(e) => {
                                setbtnindex(index)
                            }}>{item.title}<span style={{ marginLeft: '3px', height: '18px', width: '15px', textAlign: 'center', display: 'inline-block', backgroundColor: '#fff', color: 'black' }}>0</span></Button>
                        })
                    }
                </div>
                <div>
                    <Input size='small' style={{ width: '250px', marginLeft: '10px' }} placeholder="客户名称，手机号码，合同编号" />
                    <Button size='small' style={{ borderRadius: '5px', marginLeft: '5px', border: 'none', backgroundColor: 'rgb(72, 141, 201' }} type="primary"
                    >搜索</Button>
                    <Button onClick={() => {
                        highLevelSearch()
                    }} size='small' style={{ borderRadius: '5px', backgroundColor: '#cc2626', border: 'none', color: '#fff', marginLeft: '5px' }} type="primary">高级搜索{
                            arrowstatus === 'block' ? <CaretUpOutlined /> : <CaretDownOutlined />
                        }</Button>
                </div>
            </div>
            <div ref={formRef} style={{ marginTop: "10px", display: 'block' }}>
                <Collapse defaultActiveKey={['1']}>
                    <div style={{ marginTop: '10px' }}>
                        <div>
                            <Form
                                form={form}
                                name="basic"
                                labelCol={{ span: 8 }}
                                wrapperCol={{ span: 16 }}

                                autoComplete="off"
                            >
                                <Row>
                                    <Col span={8}>
                                        <Form.Item style={{ marginBottom: '3px' }} label="编号" name="num">
                                            <Input size='small' />
                                        </Form.Item>
                                        <Form.Item style={{ marginBottom: '3px' }} label="起始日期" name="dateStart">
                                            <Space direction="vertical" size={12}>
                                                <RangePicker size='small' onChange={(a, b) => {
                                                    console.log(a, b);
                                                    setdateStart([...b])
                                                }} />
                                            </Space>
                                        </Form.Item>
                                        <Form.Item style={{ marginBottom: '3px' }} label="合同状态" name="contractStatus">
                                            <Select
                                                size='small'
                                                // value={value.currency || currency}
                                                style={{ width: 120, margin: '0 8px' }}
                                            // onChange={onCurrencyChange}
                                            >
                                                <Option value="unAudit">待审</Option>
                                                <Option value="youxiao">合同有效</Option>
                                                <Option value="wuxiao">合同无效</Option>
                                                <Option value="guoqi">已过期</Option>
                                            </Select>
                                        </Form.Item>
                                        <Form.Item style={{ marginBottom: '3px' }} label="业务员" name="salesman">
                                            <Select
                                                size='small'
                                                // value={value.currency || currency}
                                                style={{ width: 120, margin: '0 8px' }}
                                            // onChange={onCurrencyChange}
                                            >
                                                <Option value="unAudit">超级管理员</Option>
                                            </Select>
                                        </Form.Item>
                                    </Col>
                                    <Col span={8}>
                                        <Form.Item style={{ marginBottom: '3px' }} label="客户名称" name="customerName">
                                            <Input size='small' />
                                        </Form.Item>
                                        <Form.Item style={{ marginBottom: '3px' }} label="到期日期" name="endDate">
                                            <Space direction="vertical" size={12}>
                                                <RangePicker size='small' />
                                            </Space>
                                        </Form.Item>
                                        <Form.Item style={{ marginBottom: '3px' }} label="是否欠款" name="isArrears">
                                            <Radio.Group>
                                                <Radio value="a">是</Radio>
                                                <Radio value="b">否</Radio>
                                                <Radio value="c">未知</Radio>
                                            </Radio.Group>
                                        </Form.Item>
                                        <Form.Item style={{ marginBottom: '3px' }} label="录入日期" name="recordDate">
                                            <Space direction="vertical" size={12}>
                                                <RangePicker size='small' onChange={(a, b) => {
                                                    console.log(a, b);
                                                    setdateEnd([...b])
                                                }} />
                                            </Space>
                                        </Form.Item>
                                    </Col>
                                    <Col span={8}>
                                        <Form.Item style={{ marginBottom: '3px' }} label="合同编号" name="constractNum">
                                            <Input size='small' />
                                        </Form.Item>
                                        <Form.Item style={{ marginBottom: '3px' }} label="合同分类" name="constractCategory">

                                            <Select
                                                size='small'
                                                // value={value.currency || currency}
                                                style={{ width: 120, margin: '0 8px' }}
                                            // onChange={onCurrencyChange}
                                            >
                                                <Option value="a">买卖</Option>
                                                <Option value="b">租赁</Option>
                                                <Option value="c">工程</Option>
                                                <Option value="d">技术</Option>
                                                <Option value="e">委托</Option>
                                                <Option value="f">其他</Option>
                                            </Select>
                                        </Form.Item>
                                        <Form.Item style={{ marginBottom: '3px' }} label="续费状态" name="renewalStatus">
                                            <Select
                                                size='small'
                                                // value={value.currency || currency}
                                                style={{ width: 120, margin: '0 8px' }}
                                            // onChange={onCurrencyChange}
                                            >
                                                <Option value="unAudit">续费有效</Option>
                                                <Option value="youxiao">续费无效</Option>
                                            </Select>
                                        </Form.Item>
                                        <Form.Item style={{ marginBottom: '3px' }} label="备注" name="remark">
                                            <Input size='small' />
                                        </Form.Item>
                                    </Col>
                                </Row>
                            </Form>
                        </div>
                    </div>
                    {/* </Panel>   */}
                    <div style={{ marginTop: "10px", marginLeft: '40%' }}>
                        <Button size='small' className='employeesList_fold_btn1' onClick={
                            () => {
                                formValue()
                            }
                        }>立即搜索</Button>
                        <Button size='small' className='employeesList_fold_btn2' onClick={() => {
                            onReset()
                        }}>清空条件</Button>
                        <Button size='small' onClick={download} className='employeesList_fold_btn3' >导出数据</Button>
                    </div>
                </Collapse>
            </div>
            <div style={{ marginTop: '20px' }}>
                <div style={{ backgroundColor: '#e7e7e7', padding: '5px' }}>
                    <Table pagination={false} size='small' columns={columns} dataSource={tableData} scroll={{ x: 2300 }}
                    />
                </div>
            </div>
            <div style={{ marginTop: '10px', fontWeight: 'bold', color: 'red', width: '100%', height: '50px', lineHeight: '50px', textAlign: 'center', background: '#fcfae3' }}>
                汇总统计    总金额：1    已收款：11    欠款：-10
            </div>
            {/* <Mypagination /> */}
            {/* modal框 */}
            <Modal cancelText="关闭" okText="新增" destroyOnClose className='AddContractModal' title={<span style={{ fontWeight: 'bold' }}>审核合同</span>} visible={audit} onOk={handleAuditOk} onCancel={handleAuditCancel}>
                <div className='AddContractModalBox'>
                    <div style={{ fontWeight: 'bold', marginBottom: '10px', borderBottom: '1px solod #aba9a9' }}>合同审核</div>
                    <Radio.Group onChange={radioChange} defaultValue={currentTableData.constractStatus?.status} >
                        <Radio value={0}>合同有效</Radio>
                        <Radio value={1}>合同无效</Radio>
                        <Radio value={2}>待审</Radio>
                    </Radio.Group>
                </div>
            </Modal>
            {/* 续费记录modal */}
            <div>
                <Modal cancelText="关闭" okText="新增" className='AddContractModal myrenewModal' title={<span style={{ fontWeight: 'bold' }}>查看续费</span>} visible={is_renew_modal_visible} onOk={handle_renew_Ok} onCancel={handle_renew_Ok_cancel}>
                    <div className='addContract' >
                        <div >
                            <Form
                                layout="horizontal"
                                autoComplete="off"
                            >
                                <Form.Item className='formBottom'>
                                    <div className='mytab'>
                                        <Table dataSource={renew_data_source} columns={renew_data_columns} pagination={false} />
                                    </div>
                                </Form.Item>
                            </Form>
                        </div>
                    </div>
                </Modal>
            </div>
            {/* 表格续费按钮modal框 新增或者修改*/}
            <div>
                <Modal cancelText="关闭" okText="保存" destroyOnClose className='AddContractModal myrenewModal' title={<span style={{ fontWeight: 'bold' }}>续费</span>} visible={AddRenew} onOk={handleAddRenewOk} onCancel={handleAddRenewCancel}>
                    <div className='AddContractModalBox'>
                        <div style={{ fontWeight: 'bold', marginBottom: '10px', borderBottom: '1px solod #aba9a9' }}>{isAddRenew === true ? "新增合同续费" : '修改合同续费记录'}</div>
                        <div className='addContract' >
                            <div >
                                <Form
                                    labelCol={{ span: 8 }}
                                    wrapperCol={{ span: 16 }}
                                    layout="horizontal"
                                    autoComplete="off"
                                >
                                    <Form.Item className='formBottom ' label="到期日期">
                                        <Input disabled className='shortInput whiteInput' value={'HT1564156'}></Input>
                                    </Form.Item>
                                    <Form.Item className='formBottom' label="起始日期">
                                        <div style={{ display: 'flex' }}>
                                            <div>
                                                <Input value={'2022-5-6'} disabled style={{ width: '100px' }} className=' whiteInput'></Input>
                                                <span style={{ marginLeft: '45px' }}>到期日期</span> <Input value={'2022-5-6'} disabled style={{ width: '100px' }} className='whiteInput'></Input>
                                            </div>

                                        </div>
                                    </Form.Item>
                                    <Form.Item className='formBottom ' label="总金额">
                                        <Input value={135} disabled style={{ width: '100px' }} className=' whiteInput'></Input> 元
                                        <span style={{ marginLeft: '30px' }}>已收款：</span> <Input value={22} disabled style={{ width: '100px' }} className='whiteInput'></Input> 元
                                    </Form.Item>
                                    <Form.Item className='formBottom ' required label="新到期日期">
                                        <DatePicker />
                                        <span style={{ color: '#969696', marginLeft: '5px' }}><QuestionCircleOutlined className='wenhao' />  更新合同到期日期时间</span>
                                    </Form.Item>
                                    <Form.Item required className='formBottom ' label="总金额">
                                        <Input style={{ width: '100px' }} className=' whiteInput'></Input> 元
                                        <span style={{ marginLeft: '30px' }}>已收款：</span> <Input style={{ width: '100px' }} className='whiteInput'></Input> 元
                                    </Form.Item>
                                    <Form.Item className='formBottom ' label="备注">
                                        <TextArea rows={4} />
                                    </Form.Item>
                                    {
                                        isAddRenew === true ? <Form.Item className='formBottom ' label="业务员">
                                            <Button disabled style={{ color: '#fff', borderRadius: '5px', backgroundColor: '#0099cc' }}>超级管理员</Button>
                                        </Form.Item> : ''
                                    }
                                </Form>
                            </div>
                        </div>
                    </div>
                </Modal>
            </div>
            {/* 到款modal框 */}
            <Modal cancelText="关闭" okText="保存" destroyOnClose className='AddContractModal' title={<span style={{ fontWeight: 'bold' }}>合同到款</span>} visible={receive} onOk={handlereceiveOk} onCancel={handlereceiveCancel}>
                <div className='AddContractModalBox'>
                    <div style={{ fontWeight: 'bold', marginBottom: '10px', borderBottom: '1px solod #aba9a9' }}>新增到款</div>
                    <Form
                        labelCol={{ span: 8 }}
                        wrapperCol={{ span: 16 }}
                        layout="horizontal"
                        autoComplete="off"
                    >
                        <Form.Item className='formBottom ' label="到款金额">
                            <Input required className='shortInput whiteInput' ></Input>
                        </Form.Item>
                        <Form.Item className='formBottom ' label="备注">
                            <TextArea rows={4} />
                        </Form.Item>
                    </Form>

                </div>
            </Modal>
            {/* 修改 */}
            <Contractmodify typeId={1} openreceive={openreceive} title="修改合同" title2="修改合同信息" customerData={customerData} isAddContractModalVisible={isAddContractModalVisible} showAddContractModal={showAddContractModal} />
            {/* 删除modal框 */}
            <Modal cancelText="关闭" okText="保存" destroyOnClose className='AddContractModal' title={<span style={{ fontWeight: 'bold' }}>删除合同</span>} visible={deleteContract} onOk={handledeleteContractOk} onCancel={handledeleteContractCancel}>
                <div className='AddContractModalBox'>
                    <div style={{ fontWeight: 'bold', marginBottom: '10px', borderBottom: '1px solod #aba9a9' }}>填写合同删除原因</div>
                    <Form

                        layout="horizontal"
                        autoComplete="off"
                    >
                        <Form.Item className='formBottom ' name="reason">
                            <TextArea rows={4} />
                        </Form.Item>
                        <Form.Item className='formBottom '>
                            <div style={{ color: 'red' }}>提示：删除合同记录将同时删除合同续费记录和对应财务记录</div>
                        </Form.Item>
                    </Form>

                </div>
            </Modal>
        </div>
    );
}
export default List;
